<template>
  <div class="w-100">
    <!--表格-->
    <div class="border mt-3">
      <!--<div class="d-flex py-3 pl-3 justify-content-between px-3">-->
        <!--<div><span style="font-size: 20px;">数据列表</span>&nbsp;&nbsp;<span class="text-warning">共0条数据</span></div>-->
        <!--<div>-->
          <!--<el-button type="primary">导入<i class="el-icon-upload2 el-icon&#45;&#45;right"></i></el-button>-->
          <!--<el-button type="primary">导出<i class="el-icon-download el-icon&#45;&#45;right"></i></el-button>-->
        <!--</div>-->
      <!--</div>-->
      <div class="py-3 float-right pr-5">
        <el-button type="primary" @click="openAddDialog">新增</el-button>
      </div>
      <el-table
        :data="tableData"
        :header-cell-style="getRowClass"
        style="width: 100%">
        <el-table-column
          prop="address"
          label="地区(精确到省市，可填多个)"
          style="width: 20%"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input style="width: 80%" v-model="scope.row.address" placeholder="请输入省市(可输入多个)"></el-input>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          prop="app"
          label="app"
          style="width: 20%"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-select v-model="scope.row.app" placeholder="请选择">-->
              <!--<el-option-->
                <!--v-for="item in apps"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          label="每日条数(上限5000)"
          style="width: 20%"
          prop="number"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input-number v-model="scope.row.number" :step="100" @change="handleChange" :min="0" :max="5000" label="描述文字"></el-input-number>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          label="周期"
          style="width: 20%"
          prop="day"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input-number v-model="scope.row.day" :step="30" @change="handleChange" :min="30" :max="360" label="描述文字"></el-input-number>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          label="统计(元)"
          style="width: 10%"
        >
          <template slot-scope="scope">
            <span>{{scope.row.number * scope.row.day * 0.6}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          prop="status"
          style="width: 10%"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="openDialog(scope.$index, scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="block mt-3 float-right">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--新增对话框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-position="right">
        <el-form-item label="地区(可填多个)(必填)" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="app(必选)" :label-width="formLabelWidth">
          <el-select v-model="form.app" placeholder="请选择">
            <el-option
              v-for="item in apps"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每日条数(上限5000条)(必填)" :label-width="formLabelWidth">
          <el-input-number v-model="form.number" :step="100" @change="handleChange" :min="0" :max="5000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="周期(上限360天)(必填)" :label-width="formLabelWidth">
          <el-input-number v-model="form.day" :step="30" @change="handleChange" :min="0" :max="5000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="统计" :label-width="formLabelWidth">
          <span>{{form.number * form.day * 0.6}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑对话框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormEditVisible">
      <el-form :model="form" label-position="right">
        <el-form-item label="地区(可填多个)(必填)" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="app(必选)" :label-width="formLabelWidth">
          <el-select v-model="form.app" placeholder="请选择">
            <el-option
              v-for="item in apps"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每日条数(上限5000条)(必填)" :label-width="formLabelWidth">
          <el-input-number v-model="form.number" :step="100" @change="handleChange" :min="0" :max="5000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="周期(上限360天)(必填)" :label-width="formLabelWidth">
          <el-input-number v-model="form.day" :step="30" @change="handleChange" :min="0" :max="5000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="统计" :label-width="formLabelWidth">
          <span>{{form.number * form.day * 0.6}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {index, add, edit ,app} from "../apis/index";
export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      apps: [
        // {
        //   value: '微信'
        //   // value: '选项1',
        //   // label: '微信'
        // },
        // {
        //   value: 'QQ'
        //   // value: '选项2',
        //   // label: 'QQ'
        // },
        // {
        //   value: '美团'
        //   // value: '选项3',
        //   // label: '美团'
        // },
        // {
        //   value: '大众点评'
        //   // value: '选项4',
        //   // label: '大众点评'
        // },
        // {
        //   value: '滴滴出行'
        //   // value: '选项5',
        //   // label: '滴滴出行'
        // }
      ],
      app: '',
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      form: {
        address: '',
        app: '',
        number: 0,
        day: 0
      },
      formLabelWidth: '200px',
      tableIndex: {}
    }
  },
  components: {
  },
  async mounted(){
    const result = await index('10', '1');
    const appResult = await app();
    console.log('appResult:', appResult);
    if(result.data.data.length > 0) {
      appResult.data.data.forEach(item => {
        this.apps.push({
          value: item.label
        })
      });
    }
    // console.log('result:' , result);
    result.data.data.forEach(item => {
      // console.log('item:', item);
      this.tableData.push({
        address: item.address,
        app: item.app,
        number: item.number,
        day: item.day,
        status: item.status_link
      })
    });
    this.total = result.data.mate.total;
    console.log('this.total:', this.total);
  },
  methods: {
    // 方法
    // 设置表格第一行的颜色
    getRowClass({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background: #F5F7FA'
      } else {
        return ''
      }
    },

    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   console.log(`handleSizeChange方法`);
    // },
    async handleCurrentChange(val) {
      console.log(`handleCurrentChange方法`);
      const result = await index('10', val);
      this.tableData = [];
      result.data.data.forEach(item => {
        // console.log('item:', item);
        this.tableData.push({
          address: item.address,
          app: item.app,
          number: item.number,
          day: item.day,
          status: item.status_link
        })
      });
    },
    handleChange(value) {
      console.log(value);
    },
    openAddDialog(){
      console.log('this.form.app:', this.form.app);
      this.dialogFormVisible = true;
      this.form.address = '';
      this.form.app = '';
      this.form.number = 0;
      this.form.day = 0;
    },
    async addData(){
      if(this.form.address === ''){
        this.$message.error('请输入地址');
        return false;
      }
      if(this.form.app === ''){
        this.$message.error('请选择app');
        return false;
      }
      if(this.form.number === 0){
        this.$message.error('请填写周期');
        return false;
      }if(this.form.day === 0){
        this.$message.error('请填写天数');
        return false;
      }
      this.dialogFormVisible = false;
      let params = {
        address:  this.form.address,
        app: this.form.app,
        number: this.form.number,
        day: this.form.day
      };
      await add(params);
      // console.log('result:', result);
      this.tableData.push({
        address:  this.form.address,
        app: this.form.app,
        number: this.form.number,
        day: this.form.day
      });
    },
    async openDialog(index, row){
      console.log('this.form.app:', this.form.app);
      // console.log(index, row);
      this.dialogFormEditVisible = true;
      let _row = row;
      let _index = {tableIndex: index};
      //将每一行的数据赋值给Dialog弹框（这里是重点）
      this.form = Object.assign({}, _row); // editForm是Dialog弹框的data
      this.tableIndex = Object.assign({}, _index); // editForm是Dialog弹框的data
      // console.log('编辑弹框内容：', this.form);
      // console.log('编辑表格行数：', this.tableIndex);
      // this.form.address = row.address;
      // this.form.app = row.app;
      // this.form.number = row.number;
      // this.form.day = row.day;
    },
    async editData(){
      // console.log('编辑弹框内容：', this.form);
      if(this.form.address === ''){
        this.$message.error('请输入地址');
        return false;
      }
      if(this.form.app === ''){
        this.$message.error('请选择app');
        return false;
      }
      if(this.form.number === 0){
        this.$message.error('请填写周期');
        return false;
      }if(this.form.day === 0){
        this.$message.error('请填写天数');
        return false;
      }
      let params = {
        address:  this.form.address,
        app: this.form.app,
        number: this.form.number,
        day: this.form.day
      };
      await edit(this.tableIndex.tableIndex+1, params);
      this.dialogFormEditVisible = false;
      this.tableData.splice(this.tableIndex.tableIndex, 1, {
        address:  this.form.address,
        app: this.form.app,
        number: this.form.number,
        day: this.form.day
      });
    }
  }
}
</script>
<style>
</style>
